<style>
    :root {
        --facebook: #1877F2;
        --twitter: #1DA1F2;
        --instagram: #E1306C;
        --youtube: #FF0000;
        --linkedin: #0077B5;
        --pinterest: #BD081C;
        --snapchat: #FFFC00;
        --tiktok: #000000;
        --wechat: #07C160;
        --weibo: #E6162D;
    }

    body {
        font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        background-color: #f8f9fa;
        padding: 40px 0;
    }

    .section-title {
        text-align: center;
        margin-bottom: 50px;
        color: #333;
    }

    /* logo 基础样式 */
    .logo-card {
        background-color: white;
        border-radius: 10px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        margin-bottom: 30px;
    }

    .logo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .logo-card .logo-container {
        width: 120px;
        height: 120px;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .logo-card .logo-container.rectangle {
        border-radius: 20px;
        width: 180px;
    }

    .logo-card .logo-container.rounded {
        border-radius: 10px;
    }

    .logo-card .logo-icon {
        font-size: 48px;
        color: white;
    }

    .logo-card .logo-name {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 10px;
        color: #333;
    }

    .logo-card .logo-desc {
        font-size: 0.9rem;
        color: #666;
    }

    /* 文字logo样式 */
    .logo-card .text-logo {
        font-size: 2.5rem;
        font-weight: 700;
        color: white;
    }

    /* 特定品牌颜色：颜色不同 */
    .facebook {
        background-color: var(--facebook);
    }

    .twitter {
        background-color: var(--twitter);
    }

    .instagram {
        background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
    }

    .youtube {
        background-color: var(--youtube);
    }


    .wechat {
        background-color: var(--wechat);
    }

    .weibo {
        background-color: var(--weibo);
    }

    /* 自定义logo样式：颜色不同 */
    .custom-logo-1 {
        background-color: #6C63FF;
    }

    .custom-logo-2 {
        background-color: #FF6584;
    }

    .custom-logo-3 {
        background: linear-gradient(135deg, #00B4DB, #0083B0);
    }

    .custom-logo-4 {
        background: linear-gradient(135deg, #8A2BE2, #4B0082);
    }


    /* 响应式调整 */
    @media (max-width: 768px) {
        .logo-card .logo-container {
            width: 100px;
            height: 100px;
        }

        .logo-card .logo-container.rectangle {
            width: 150px;
        }

        .logo-card .logo-icon {
            font-size: 40px;
        }
    }
</style>


<div class="container">
    <h1 class="section-title">社交网站Logo设计展示</h1>

    <h2 class="mb-4">经典社交平台Logo</h2>
    <div class="row">
        <!-- Facebook风格 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container facebook">
                    <i class="fab fa-facebook-f logo-icon"></i>
                </div>
                <h3 class="logo-name">Facebook</h3>
                <p class="logo-desc">圆形设计，蓝色主调，简约字母标识</p>
            </div>
        </div>

        <!-- Twitter风格 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container twitter">
                    <i class="fab fa-twitter logo-icon"></i>
                </div>
                <h3 class="logo-name">Twitter</h3>
                <p class="logo-desc">小鸟图标，蓝色主调，简洁现代</p>
            </div>
        </div>

        <!-- Instagram风格 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container instagram">
                    <i class="fab fa-instagram logo-icon"></i>
                </div>
                <h3 class="logo-name">Instagram</h3>
                <p class="logo-desc">渐变色彩，相机图标，时尚活力</p>
            </div>
        </div>

        <!-- YouTube风格 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container youtube rounded">
                    <i class="fab fa-youtube logo-icon"></i>
                </div>
                <h3 class="logo-name">YouTube</h3>
                <p class="logo-desc">矩形设计，红色主调，播放按钮</p>
            </div>
        </div>

        <!-- 微信风格 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container wechat">
                    <i class="fab fa-weixin logo-icon"></i>
                </div>
                <h3 class="logo-name">微信</h3>
                <p class="logo-desc">绿色主调，对话气泡元素</p>
            </div>
        </div>

        <!-- 微博风格 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container weibo">
                    <i class="fab fa-weibo logo-icon"></i>
                </div>
                <h3 class="logo-name">微博</h3>
                <p class="logo-desc">红色主调，眼睛图标，信息传播</p>
            </div>
        </div>
    </div>

    <h2 class="mb-4 mt-5">文字标识Logo</h2>
    <div class="row">
        <!-- 文字Logo 1 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container custom-logo-1 rectangle">
                    <span class="text-logo">SOCIAL</span>
                </div>
                <h3 class="logo-name">纯文字标识</h3>
                <p class="logo-desc">简洁字体，品牌名称直接展示</p>
            </div>
        </div>

        <!-- 文字Logo 2 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container custom-logo-2 rectangle">
                    <span class="text-logo">CONNECT</span>
                </div>
                <h3 class="logo-name">强调型文字</h3>
                <p class="logo-desc">加粗字体，突出品牌名称</p>
            </div>
        </div>

        <!-- 文字Logo 3 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container custom-logo-3 rectangle">
                    <span class="text-logo">LINK</span>
                </div>
                <h3 class="logo-name">缩写文字</h3>
                <p class="logo-desc">品牌名称缩写，易记易识别</p>
            </div>
        </div>
    </div>

    <h2 class="mb-4 mt-5">创意概念Logo</h2>
    <div class="row">
        <!-- 创意Logo 1 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container custom-logo-4">
                    <i class="fas fa-users logo-icon"></i>
                </div>
                <h3 class="logo-name">社群连接</h3>
                <p class="logo-desc">以用户群体为核心的设计理念</p>
            </div>
        </div>

        <!-- 创意Logo 2 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container custom-logo-1 rounded">
                    <i class="fas fa-comment-dots logo-icon"></i>
                </div>
                <h3 class="logo-name">沟通交流</h3>
                <p class="logo-desc">突出对话与交流的核心功能</p>
            </div>
        </div>

        <!-- 创意Logo 3 -->
        <div class="col-md-4 col-sm-6">
            <div class="logo-card">
                <div class="logo-container custom-logo-2">
                    <i class="fas fa-share-alt logo-icon"></i>
                </div>
                <h3 class="logo-name">分享传播</h3>
                <p class="logo-desc">强调内容分享与信息传播</p>
            </div>
        </div>
    </div>
</div>



    